<template>
  <div>
    <div class="jsx-2584902983 root">
      <div class="jsx-1633072295 root">
        <div>
          <div class="jsx-2366251733 cartbook-row">
            <div class="SelItem" style="padding-left: 15px">
              <div class="SelItem-checkbox">
                <button
                  class="Button Checkbox checked forest small Button--icon"
                >
                  <div class="Button-inner">
                    <svg
                      width="18px"
                      height="18px"
                      viewBox="0 0 20 20"
                      version="1.1"
                      fill="none"
                      fill-rule="evenodd"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2.90909091"
                      stroke="#497749"
                      style="
                        width: 13px;
                        height: 13px;
                        stroke: rgb(255, 255, 255);
                      "
                    >
                      <polyline
                        points="2 9.70728325 7.53750321 15 18 5"
                      ></polyline>
                    </svg>
                  </div>
                </button>
              </div>
              <div class="SelItem-content">
                <div class="jsx-2289174523 cart-item">
                  <a
                    href="/products/607274886875975828?itemId=643422252511141496"
                    ><div class="jsx-2289174523 inner">
                      <div class="jsx-1947202380 root fixHeight mini">
                        <div
                          class="jsx-1947202380 img"
                          style="
                            background-image: url('https://img.duozhuayu.com/41404c4851af11ec9b9a3665a4bfb119.jpeg?x-oss-process=image/resize,w_495/quality,Q_80');
                            background-size: contain;
                          "
                        ></div>
                      </div>
                      <div class="jsx-2289174523 item-content">
                        <h2 class="jsx-2289174523 item-title">
                          URBAN REVIVO 短袖 T 恤 女装
                        </h2>
                        <div class="jsx-3754656716 item-desc">
                          <div class="jsx-1960241746">
                            <p class="jsx-1960241746">L·165</p>
                            <p class="jsx-1960241746 flaw-reason">
                              有 1 处轻度印迹残留
                            </p>
                          </div>
                        </div>
                        <div class="jsx-3754656716 holder"></div>
                        <div class="jsx-3754656716 item-footer">
                          <div class="jsx-3754656716 price-and-label">
                            <span
                              class="
                                jsx-2899740217
                                Price Price--medium Price--bold
                              "
                              >¥36.00</span
                            >
                          </div>
                          <div class="jsx-3754656716 holder"></div>
                        </div>
                      </div>
                      <button type="button" class="jsx-1609122007 cross-btn">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="10"
                          height="10"
                          viewBox="0 0 12 12"
                          stroke="rgb(210, 210, 210)"
                        >
                          <g
                            fill="none"
                            fill-rule="evenodd"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            transform="translate(1 1)"
                          >
                            <path d="M10 0L0 10M0 0L10 10"></path>
                          </g>
                        </svg>
                      </button></div
                  ></a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="jsx-1633072295 footer">
          <div class="jsx-4100974190 root">
            <div class="jsx-4100974190 line"></div>
            <svg
              width="12"
              viewBox="0 0 24 24"
              fill="currentColor"
              xmlns="http://www.w3.org/2000/svg"
              class="jsx-4100974190"
            >
              <rect
                x="4"
                y="4"
                width="16"
                height="16"
                class="jsx-4100974190"
              ></rect>
            </svg>
            <div class="jsx-4100974190 line"></div>
          </div>
        </div>
      </div>
      <div class="Fixed">
        <div class="jsx-864363205 limit-width-root">
          <div class="jsx-1572163888 banner-wrap">
            <div class="jsx-1572163888 colored-banner forest centered slim">
              <p>查看 1 张优惠券</p>
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                xmlns="http://www.w3.org/2000/svg"
                class="Icon"
                style="margin-right: -4px"
              >
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </div>
          </div>
        </div>
        <div class="jsx-864363205 limit-width-root">
          <div class="Bar Bar-cart">
            <div class="SelItem">
              <div class="SelItem-checkbox">
                <button
                  class="Button Checkbox checked forest small Button--icon"
                  style="border-radius: 999px"
                >
                  <div class="Button-inner">
                    <svg
                      width="18px"
                      height="18px"
                      viewBox="0 0 20 20"
                      version="1.1"
                      fill="none"
                      fill-rule="evenodd"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2.90909091"
                      stroke="#497749"
                      style="
                        width: 13px;
                        height: 13px;
                        stroke: rgb(255, 255, 255);
                      "
                    >
                      <polyline
                        points="2 9.70728325 7.53750321 15 18 5"
                      ></polyline>
                    </svg>
                  </div>
                </button>
              </div>
              <div class="SelItem-content">
                <span class="jsx-509144138 checkbox-text">已选 1</span>
              </div>
            </div>
            <div class="Bar-text">
              <span
                class="jsx-4196961568 Text Text--clay Text--large Text--right"
                style="line-height: 1.2; font-weight: 400"
                >¥36.00</span
              >
              <div class="jsx-509144138 bar-additional-info">
                运费<span
                  class="jsx-4196961568 Text Text--normal Text--ps"
                  style="margin-right: 5px"
                  >¥5</span
                >再买<span
                  class="jsx-4196961568 Text Text--normal Text--ps Text--pe"
                  >¥43.00</span
                >包邮
              </div>
            </div>
            <button
              class="Button Button--forest"
              style="padding: 8px 14px; font-weight: 400"
            >
              结算
            </button>
          </div>
        </div>
        <div class="Fix-iphone-x"></div>
      </div>
      <div class="jsx-1248852712">
        <a href="#/"
          ><div class="jsx-1248852712 home-btn">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 200 200"
              width="28"
              height="28"
              fill="rgb(255, 255, 255)"
            >
              <path
                d="M151.34 170.38H48.16c-5.78 0-10.38-3.74-12.28-10-4.55-15-.68-54.86-.22-59.37-.13-.81-1.32-1.67-2.9-1.67a12.36 12.36 0 01-12-8.08 10.78 10.78 0 014-12.12l67-50.5a13.47 13.47 0 0115.94 0l67 50.5a10.78 10.78 0 014 12.12 12.35 12.35 0 01-12 8.08c-1.57 0-2.77.86-2.9 1.67.45 4.41 4.16 43-.17 59.21-1.63 6.27-6.35 10.16-12.29 10.16zM99.75 35.61a3.65 3.65 0 00-2.19.67l-67 50.51c-.91.68-.74 1.2-.66 1.42.25.76 1.23 1.53 2.86 1.53 6.89 0 12.5 5.12 12.5 11.4v.5c-1.22 11.71-3.63 44.59-.18 55.94 1 3.22 2.53 3.22 3.11 3.22h103.15c1.5 0 2.53-1 3.07-3.06 4-15.15-.09-55.69-.14-56.1v-.5c0-6.28 5.6-11.4 12.49-11.4 1.63 0 2.62-.77 2.87-1.53.07-.22.25-.74-.67-1.42L102 36.28a3.7 3.7 0 00-2.25-.67zm-5.08-3.16z"
              ></path>
              <path
                d="M80.1 153.37a4.79 4.79 0 01-4.79-4.8v-19.32c0-7.75 7.61-16.06 17-16.06h14.94c9.36 0 17 8.31 17 16.06v19.32a4.8 4.8 0 11-9.59 0v-19.32c0-2.11-3.16-6.47-7.39-6.47H92.28c-4.23 0-7.39 4.36-7.39 6.47v19.32a4.79 4.79 0 01-4.79 4.8z"
              ></path>
            </svg></div
        ></a>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.root.jsx-2584902983 {
    -webkit-box-flex: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 64px;
}
.root.jsx-1633072295 {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
}
.cartbook-row.jsx-2366251733 {
    border-bottom: 0.5px solid rgb(242, 242, 242);
}
.SelItem {
    display: -webkit-flex;
    display: flex;
}
.SelItem-checkbox {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
/* 选中按钮 */
.Checkbox.forest.checked {
    background: #497749;
}
.Checkbox.small {
    width: 21px!important;
    height: 21px!important;
}
.Checkbox.forest {
    border: 1.5px solid #497749;
}
.Checkbox.checked {
    background: rgb(24, 195, 170);
}
.Checkbox {
    width: 25px!important;
    height: 25px!important;
    background: #fff;
    border: 1.5px solid rgb(24, 195, 170);
    transition: background .1s;
}
.Button--icon {
    width: 54px;
    height: 54px;
    padding: 0;
}
.Button {
    display: inline-block;
    box-sizing: border-box;
    padding: 8px 1.5em 8px;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 0.5px solid rgb(242, 242, 242);
    border-radius: 999px;
    pointer-events: auto;
    cursor: pointer;
}
button {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    border: none;
    outline: none;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
}

.Button-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
}

.SelItem-content {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-align-items: center;
    align-items: center;
}
.cart-item.jsx-2289174523 {
    -webkit-box-flex: 1;
    flex-grow: 1;
    padding-left: 12px;
    position: relative;
}
.inner.jsx-2289174523 {
    display: flex;
    -webkit-box-align: start;
    align-items: start;
    padding: 15px 15px 15px 0px;
}
.mini.jsx-1947202380 {
    width: 50px;
    height: 70px;
}
/* .root.jsx-1947202380 {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex-shrink: 0;
    width: 110px;
    height: 156px;
} */
.fixHeight.jsx-1947202380 .img.jsx-1947202380 {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.img.jsx-1947202380 {
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.item-content.jsx-2289174523 {
    display: flex;
    flex-direction: column;
    min-height: 70px;
    -webkit-box-flex: 1;
    flex-grow: 1;
    margin-left: 12px;
}
.item-title.jsx-2289174523 {
    margin-right: 25px;
    font-size: 14px;
    font-weight: 500;
    color: rgb(51, 51, 51);
}
.item-desc.jsx-3754656716 {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    margin: 4px 25px 3px 0px;
}
.flaw-reason.jsx-1960241746 {
    color: rgb(199, 89, 67);
    margin-top: 2px;
}
.holder.jsx-3754656716 {
    -webkit-box-flex: 1;
    flex-grow: 1;
}
.item-footer.jsx-3754656716 {
    display: flex;
    align-items: flex-end;
    -webkit-box-pack: end;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 7px;
}
.price-and-label.jsx-3754656716 {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
.Price--bold {
    font-weight: 500;
}
.Price--medium {
    font-size: 16px;
}
.holder.jsx-3754656716 {
    -webkit-box-flex: 1;
    flex-grow: 1;
}
.cross-btn.jsx-1609122007 {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}

.footer.jsx-1633072295 {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    height: 19px;
    padding: 30px 0px;
    color: rgb(102, 102, 102);
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
}
.root.jsx-4100974190 {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.1);
}
.line.jsx-4100974190 {
    width: 42px;
    border-top: 0.5px solid currentcolor;
}
svg.jsx-4100974190 {
    margin: 0px 9px;
    transform: rotate(
45deg);
}
.Fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
}
.limit-width-root.jsx-864363205 {
    max-width: 600px;
    margin: 0px auto;
}
.banner-wrap.jsx-1572163888 {
    background-color: rgb(255, 255, 255);
    cursor: pointer;
}
.colored-banner.slim.jsx-1572163888 {
    padding: 8px 15px;
    font-size: 13px;
}
.colored-banner.centered.jsx-1572163888 {
    -webkit-box-pack: center;
    justify-content: center;
}
.colored-banner.forest.jsx-1572163888 {
    color: rgb(73, 119, 73);
    background-color: rgba(73, 119, 73, 0.08);
}
.colored-banner.jsx-1572163888 {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 15px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 400;
    color: rgb(24, 195, 170);
    background-color: rgba(24, 195, 170, 0.1);
}
.Bar {
    background: rgb(247, 247, 247);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 10px 15px;
}
.SelItem {
    display: -webkit-flex;
    display: flex;
}
.SelItem-checkbox {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
.Checkbox.forest.checked {
    background: #497749;
}
.Button-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
}
.Bar-cart .Button {
    width: 95px;
}
.Bar .Button {
    width: 108px;
    border-radius: 3px;
}
.Checkbox.small {
    width: 21px!important;
    height: 21px!important;
}
.Checkbox.forest {
    border: 1.5px solid #497749;
}
.Checkbox.checked {
    background: rgb(24, 195, 170);
}
.Checkbox {
    width: 25px!important;
    height: 25px!important;
    background: #fff;
    border: 1.5px solid rgb(24, 195, 170);
    transition: background .1s;
}
.Button--icon {
    width: 54px;
    height: 54px;
    padding: 0;
}
.Button {
    display: inline-block;
    box-sizing: border-box;
    padding: 8px 1.5em 8px;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 0.5px solid rgb(242, 242, 242);
    border-radius: 999px;
    pointer-events: auto;
    cursor: pointer;
}
button {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    border: none;
    outline: none;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
}
.Button-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
}
.SelItem-content {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-align-items: center;
    align-items: center;
}
.checkbox-text.jsx-509144138 {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 400;
    margin-left: 6px;
}
.Bar-text {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    margin-right: 9px;
    color: rgb(170, 170, 170);
    font-size: 14px;
    white-space: nowrap;
}
.Text--right {
    text-align: right;
}
.Text--large {
    font-size: 20px;
}
.Text--clay {
    color: #C75943;
}
.bar-additional-info.jsx-509144138 {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end;
    font-size: 11px;
}
.Text--ps {
    padding-left: 0.25em;
}
.Text--normal {
    color: rgb(51, 51, 51);
}
.Text--pe {
    padding-right: 0.25em;
}
.Bar-cart .Button {
    width: 95px;
}
.Bar .Button {
    width: 108px;
    border-radius: 3px;
}
.Button--forest {
    color: #fff;
    background: #497749;
    border-color: #497749;
}
.home-btn.jsx-1248852712 {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 46px;
    height: 46px;
    position: fixed;
    bottom: 180px;
    right: 16px;
    border-radius: 50%;
    background: rgba(102, 102, 102, 0.96);
    box-shadow: rgb(0 0 0 / 10%) 0px 0px 8px 0px;
}
</style>